<template>
  <div class="service_contract">
    <div class="flex top">
      <div class="flex-1">
        <img
          class="w-100 h-100"
          src="../../assets/images/risk.jpg"
          alt="布尔数据"
        />
      </div>
      <div class="right">
        <p class="flex flex-between align-center">
          <span style="font-size: 20px">布尔数据账户</span>
          <span class="blue-font pointer" @click="checkRecords">购买记录</span>
        </p>
        <p class="flex flex-between align-center" style="margin: 15px 0 10px">
          <span class="color-666">布尔数据余量</span>
          <span class="color-666">{{ risk_credit_amount }}次</span>
        </p>
        <el-button
          class="w-100"
          type="primary"
          style="font-size: 18px"
          @click="toBuy"
          >去购买</el-button
        >
        <el-divider></el-divider>
        <p class="flex flex-between align-center">
          <span class="color-666"
            >自动充值（{{
              risk_credit_automatic == 1 ? "已开启" : "未开启"
            }}）</span
          >
          <span class="blue-font pointer" @click="autoRecharge">{{
            risk_credit_automatic == 1 ? "关闭" : "开启"
          }}</span>
        </p>
        <el-tag class="w-100 text-center" type="warning"
          >开启自动充值避免风控余量不足</el-tag
        >
      </div>
    </div>
    <h5 class="record_header">查询记录</h5>
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="订单编号">
          <el-input
            style="width: 230px"
            v-model="searchForm.order_id"
            placeholder="请输入订单编号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="查询时间">
          <my-date-picker ref="myDatePicker"></my-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()"
            >查询</el-button
          >
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border>
      <el-table-column align="center" width="80" prop="order_id" label="ID" />
      <el-table-column align="center" width="190" label="订单编号">
        <template slot-scope="scope">
          <span class="blue-font pointer" @click="goToOrder(scope.row.trade_no)">{{ scope.row.trade_no }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="用户名" />
      <el-table-column align="center" prop="ident_number" label="用户身份证号" />
      <el-table-column align="center" prop="phone" label="用户手机号" />
      <el-table-column align="center" prop="order_id" label="风控详情">
		<template slot-scope="scope">
			<el-button
			  size="mini"
			  class="border-btn"
			  @click="selectRisk(scope.row)"
			  >查看布尔数据详情</el-button
			>
		</template>
	  </el-table-column>
      <el-table-column align="center" prop="start_at" label="查询时间" />
    </el-table>
    <custom-page
      ref="customPage"
      :total="total"
      @getList="getList"
    ></custom-page>
    <buy-dialog
      ref="buyDialog"
      dialog-title="布尔数据余额购买"
      @getList="getList"
      :type="4"
    ></buy-dialog>
    <recharge-dialog
      ref="rechargeDialog"
      dialog-title="布尔数据自动充值"
      @getList="getList"
      :type="4"
    ></recharge-dialog>
    <select-risk
      ref="selectRisk"
      :edit-item="editItem"
      @getList="getList"
    ></select-risk>
  </div>
</template>

<script>
import {
  getShopRiskBooleaCreditList,
  autoRecharge,
  getShopRiskBooleaCreditStuatus,
  riskBooleaCreditAutoRecharge,
  
} from "@/api/marketing";
import customPage from "@/components/customPage";
import myDatePicker from "@/components/myDatePicker";
import buyDialog from "./components/buy";
import rechargeDialog from "./components/recharge";
import selectRisk from "./components/selectRisk";
export default {
  components: { customPage, myDatePicker, buyDialog, rechargeDialog,selectRisk },
  data() {
    return {
      tableData: [],
      total: 0,
      searchForm: {
        order_id: "",
        create_time: "",
      },
      risk_credit_automatic: 0,
      risk_credit_amount: 0,
      disabled: false,
      editItem: {},
    };
  },
  methods: {
    checkUrl(url) {
      if (url) {
        window.open(url);
      } else {
        this.$message.warning("暂无法查看报告");
        return;
      }
    },
    // 自动充值
    autoRecharge() {
      if (!this.showTip()) {
        return;
      }
      if (this.risk_credit_automatic == 1) {
        // 关闭
        this.$confirm("确认要关闭自动充值吗?", "关闭自动充值", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(() => {
            riskBooleaCreditAutoRecharge().then((res) => {
              this.getList();
            });
          })
          .catch(() => {});
      } else {
        // 开启
        this.$refs.rechargeDialog.dialogVisible = true;
      }
    },
    // 去购买
    toBuy() {
      if (!this.showTip()) {
        return;
      }
      this.$refs.buyDialog.dialogVisible = true;
    },
    // 查看合同购买记录
    checkRecords() {
      if (!this.showTip()) {
        return;
      }
      this.$router.push({ name: "serviceBooleaRiskRecord" });
    },
    // 查询
    search() {
      if (!this.showTip()) {
        return;
      }
      const pickerVal = this.$refs.myDatePicker.getVal();
      if (pickerVal !== "error") {
        this.searchForm.create_time = pickerVal;
        this.$refs.customPage.page = 1;
        this.getList();
      }
    },
    // 重置
    reset() {
      if (!this.showTip()) {
        return;
      }
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset();
      }
      this.searchForm = {
        order_id: "",
        create_time: "",
      };
      this.getList();
    },
    // 获取数据
    getList() {
      const { page, pageSize } = this.$refs.customPage;
      getShopRiskBooleaCreditList({
        page,
        pageSize,
        ...this.searchForm,
      }).then((res) => {
        const { data, risk_credit_automatic, risk_credit_amount } = res;
        this.tableData = data || [];
        this.total = data.total || 0;
        this.risk_credit_automatic = risk_credit_automatic;
        this.risk_credit_amount = risk_credit_amount;
      });
    },
    goToOrder(orderId) {
      if (orderId) {
        this.$router.push({ name: "orderList", params: { orderId } });
      }
    },
    getData() {
      getShopRiskBooleaCreditStuatus()
        .then((res) => {
          this.disabled = false;
          this.getList();
        })
        .catch((err) => {
        //   this.disabled = true;
        });
    },
    showTip() {
      if (this.disabled) {
        this.$message({
          message: "该店铺暂未开启布尔数据, 请先开启后再查看该功能",
          type: "error",
        });
        return false;
      }
      return true;
    },
	//查看风控大数据
	selectRisk(item){
		console.log(item,'2');
		this.editItem = {
		  orderId: item.order_id,
		  cert_name: item.name,
		  cert_no: item.ident_number,
		  mobile: item.phone,
			rent_total:item.rent_total,
			new_grade:'',
			goods_type: "4",
			website_price: "",
			month_total:''
		};
		
		this.$refs.selectRisk.dialogVisible = true;
		  
	},
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.top {
  height: 300px;
  .el-divider--horizontal {
    margin: 20px 0;
  }
}
.right {
  width: 345px;
  margin-left: 20px;
  padding: 20px;
  border: 1px solid #e6e6e6;
  p {
    line-height: 32px;
  }
  span {
    font-size: 16px;
  }
  .el-tag {
    color: #ff8500;
    margin-top: 10px;
    font-size: 14px;
  }
}
.record_header {
  padding-left: 15px;
  border-left: 3px solid $mainBlue;
  margin: 20px 0;
}
</style>
